//样式模块化(样式隔离)
//方法：
//样式文件命名为：xxx.module.css，在引入时 import 自定义名称 from "./xxx.module.css"，使用时 className={自定义名称.类名}
import css from "./index.module.css";
import React, { Component } from "react";
import { Checkbox, List, message, Button } from 'antd';
import Footer from "./Footer";
import HeaderInput from "./HeaderInput";

export default class TodoList extends Component {
  state = {
    isHover: false,
    todoList: [
      { id: 0, name: '事项1', isFinished: false },
      { id: 1, name: '事项2', isFinished: false },
    ]
  }
  render() {
    return (
      <div className={css.container}>
        <HeaderInput onAddTodos={this.onAddTodos}/>
        <List
          header={<div style={{ fontWeight: 'bold', fontSize: '16px', textAlign: 'center' }}>待办列表</div>}
          footer={<Footer todoList={this.state.todoList} onClearAllFinished={this.onClearAllFinished} onChangeAllCheck={this.onChangeAllCheck}/>}
          bordered
          dataSource={this.state.todoList}
          renderItem={(item) => (
            <List.Item 
              style={{ background: item.isHover ? '#DDD' : '', transition: 'all 0.5s', cursor: 'pointer' }}
              onMouseEnter={this.showDeleteBtn(true, item)}
              onMouseLeave={this.showDeleteBtn(false)}>
              <div className={css.listItemContainer}>
                <div>
                  <Checkbox checked={item.isFinished} onChange={e => this.onChangeIsFinished(e, item.id)}></Checkbox>
                  <span className={css.checkboxText}>{item.name}</span>
                </div>
                <Button style={{ display: item.isHover ? 'block' : 'none' }} type="primary" danger onClick={this.onDeleteTodo(item)}>删除</Button>
              </div>
            </List.Item>
          )}
        />
      </div>
    )
  }
  
  onDeleteTodo = todo => {
    return () => {
      this.setState({ todoList: this.state.todoList.filter(item => item.id !== todo.id) })
      message.success({ content: '删除成功'});
    }
  }
  showDeleteBtn = (isHover, todo) => {
    return () => {
      const hoverCallback = item => {
        if (item.id === todo.id) item.isHover = true;
        return item
      }
      const notHoverCallback = item => {
        Reflect.deleteProperty(item, 'isHover')
        return item
      }
      const callback = isHover ? hoverCallback : notHoverCallback
      this.setState({ todoList: this.state.todoList.map(item => callback(item))})
    }
  }
  onAddTodos = todoName => {
    if(this.state.todoList.filter(item => item.name === todoName).length !== 0) {
      message.error({ content: '已有相同名称的待办事项'});
      return;
    }
    const newTodo = { id: this.state.todoList.length, name: todoName, isFinished: false }
    this.setState({ todoList: [newTodo, ...this.state.todoList]  })
  }
  onChangeIsFinished = (e, todoId) => {
    this.setState({
      todoList: this.state.todoList.map(item => {
        if (item.id === todoId) item.isFinished = e.target.checked;
        return item
      })
    })
  }
  onClearAllFinished = () => {
    this.setState({ todoList: this.state.todoList.filter(item => !item.isFinished) })
  }
  onChangeAllCheck = isAllChecked => {
    this.setState({ todoList: this.state.todoList.map(item => {
      if(isAllChecked) item.isFinished = false;
      else item.isFinished = true;
      return item;
    })})
  }
}